<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'" :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>基本信息</span>
                    <span></span>
                </div>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="供应商名称:" prop="supplierName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入供应商名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.supplierName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.supplierName" placeholder="请输入供应商名称"></el-input>
                            <span v-else>{{form.supplierName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态:" prop="availableStatus"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择状态',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.availableStatus, callback)
                                       }:{}">
                            <el-radio-group v-if="'write' == state" v-model="form.availableStatus">
                                <template v-for="dict in dict.type.supplier_status">
                                    <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                                </template>
                            </el-radio-group>
                            <span v-else><dict-tag
                                :options="dict.type.supplier_status"
                                :value="form.availableStatus"/></span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="统一社会信用代码:" prop="taxpayerIdentityNumber"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入统一社会信用代码',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.taxpayerIdentityNumber, callback)
                                       },{
                                            pattern:/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
                                            message:'请输入18位数字或大写字母',
                                            trigger: 'blur'
                                       }]:{}">
                            <el-input maxlength="18" @input="value=>form.taxpayerIdentityNumber=value.replace(/[^\w_]/g, '')" v-if="'write' == state" v-model="form.taxpayerIdentityNumber" placeholder="请输入统一社会信用代码"></el-input>
                            <span v-else>{{form.taxpayerIdentityNumber|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="纳税人资格:" prop="taxpayerQualification"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入纳税人资格',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.taxpayerQualification, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.taxpayerQualification" placeholder="请输入纳税人资格"></el-input>
                            <span v-else>{{form.taxpayerQualification|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人:" prop="contact"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入联系人',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.contact, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.contact" placeholder="请输入联系人"></el-input>
                            <span v-else>{{form.contact|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话:" prop="contactPhone"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入联系电话',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.contactPhone, callback)
                                       },{ pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '手机号码格式不正确', trigger: 'blur' }
                                       ]:{}">
                            <el-input maxlength="12" @input="value=>form.contactPhone=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="form.contactPhone" placeholder="请输入联系电话"></el-input>
                            <span v-else>{{form.contactPhone|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="法人(自然人):" prop="legalPerson">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.legalPerson" placeholder="请输入法人(自然人)"></el-input>
                            <span v-else>{{form.legalPerson|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮编:" prop="postalCode"
                                      :rules="'write' == state ? [{ pattern: /^[1-9][0-9]{5}$/, message: '邮编格式不正确', trigger: 'blur' }
                                       ]:{}">
                            <el-input maxlength="6" @input="value=>form.postalCode=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="form.postalCode" placeholder="请输入邮编"></el-input>
                            <span v-else>{{form.postalCode|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="国家:" prop="country">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.country" placeholder="请输入国家"></el-input>
                            <span v-else>{{form.country|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="城市:" prop="cityName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择城市',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.cityName, callback)
                                       }:{}">
                            <ProvinceCity v-if="'write' == state" v-model="form.citydata"
                                          placeholder="请选择城市" ref="citySelect"
                                          :showAllLevels="false"
                                          @change="citySelectionChange"></ProvinceCity>
                            <span v-else>{{form.cityName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商联系地址:" prop="contactAddr">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.contactAddr" placeholder="请输入供应商联系地址"></el-input>
                            <span v-else>{{form.contactAddr|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="允许先付款后取发票:" prop="invoiceExtractMethod"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择是否允许先付款后取发票',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.invoiceExtractMethod, callback)
                                       }:{}">
                            <el-radio-group v-if="'write' == state" v-model="form.invoiceExtractMethod">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                            <span v-else>{{0==form.invoiceExtractMethod?'是':1==form.invoiceExtractMethod?'否':'--'}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商银行账户名称:" prop="accountName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入供应商银行账户名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.accountName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.accountName" placeholder="请输入供应商银行账户名称"></el-input>
                            <span v-else>{{form.accountName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户银行名称:" prop="bankName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入开户银行名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.bankName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.bankName" placeholder="请输入开户银行名称"></el-input>
                            <span v-else>{{form.bankName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账户:" prop="accountNumber"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入银行账户',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.accountNumber, callback)
                                       },{ pattern: /^[1-9]\d{11,19}$/, message: '请输入正确的银行账户', trigger: 'blur' }]:{}">
                            <el-input maxlength="20" @input="value=>form.accountNumber=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="form.accountNumber" placeholder="请输入银行账户"></el-input>
                            <span v-else>{{form.accountNumber|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="账户性质:" prop="accountNature"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入账户性质',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.accountNature, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.accountNature" placeholder="请输入账户性质"></el-input>
                            <span v-else>{{form.accountNature|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="币种:" prop="currency"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入币种',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.currency, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.currency" placeholder="请输入币种"></el-input>
                            <span v-else>{{form.currency|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公示系统超链接:" prop="publicityHyperlink"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入公示系统超链接',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.publicityHyperlink, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.publicityHyperlink" placeholder="请输入公示系统超链接"></el-input>
                            <span v-else>{{form.publicityHyperlink|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上传营业执照或公示截图:" prop="businessLicenseFrontImg"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请上传营业执照或公示截图',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.businessLicenseFrontImg, callback)
                                       }:{}">
                            <div class="flex">
                                <ImageCommon :up-type="2" :disabled="'write' != state" info="营业执照正面" :limit="1" v-model="form.businessLicenseFrontImg"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注:" prop="memo">
                            <el-input maxlength="500" type="textarea" v-if="'write' == state" v-model="form.memo" placeholder="请输入备注"></el-input>
                            <span v-else>{{form.memo|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="1==form.delStatus">
                        <el-form-item label="删除备注:" prop="delRemark">
                            <el-input type="textarea" v-if="'write' == state" v-model="form.delRemark" maxlength="500"
                                      placeholder="请填写删除备注"></el-input>
                            <span v-else>{{ form.delRemark|filterNull }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传:" prop="annex">
                            <div class="flex">
                                <ImageCommon :disabled="'write' != state" :up-type="2" info="选择附件" :limit="9" v-model="form.annex"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>

                </el-row>
            </div>

        </el-form>

    </div>
</template>

<script>


import ProvinceCity from "@/views/components/provinceCity/index.vue";

export default {
    components: {ProvinceCity},
    dicts: ['supplier_status'],
    props:{
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed:{
        form:{
            get() {
                console.log('get==>', this.value)
                return this.value;
            },
            set(value) {
                console.log('set===>', value)
                this.$emit("input", value);
            },
        },

    },
    watch: {
        form: {
            handler(newVal, oldVal) {
                if (this.isFirstChange && newVal != null && newVal.supplierId != null) {
                    this.isFirstChange = false
                    console.log('首次改变', newVal)
                    //下标0为一级菜单value
                    this.$set(this.form, 'citydata', [])
                    if(this.form.cityId && this.form.cityId != null){
                        this.$set(this.form.citydata, 0, this.form.provinceId)
                        this.$set(this.form.citydata, 1, this.form.cityId)
                    }

                    this.$forceUpdate()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            isFirstChange:true
        };
    },
    methods: {
        citySelectionChange(val) {
            if (val.length > 0) {
                const nodes = Array.from(val, item => ({
                    value: item.value,
                    label: item.label,
                    pv: item.parent.value,
                    pl: item.parent.label
                }))
                this.form.provinceId = nodes[0].pv
                this.form.provinceName = nodes[0].pl
                this.form.cityId = nodes[0].value
                this.form.cityName = nodes[0].label
            } else {
                this.form.provinceId = null
                this.form.provinceName = null
                this.form.cityId = null
                this.form.cityName = null
            }
        },

        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            // if (rule.required && !value) {
            if (rule.required && (value===undefined || value===null || value==='')) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },


        async valid() {

            // this.form.workId = this.form.id
            return new Promise((resolve)=>{
                if('write'==this.state){
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                }else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}
.el-descriptions{
    margin: 0 -15px;
}
</style>
